<template>
	<view class="page-header" >
   <view class="fu-tabbar" :style="[{ height: CustomBar + 'px' }]">
     <image v-if="info.store_backdrop" :src="info.store_backdrop" mode="widthFix" class="bg-img"></image>
   	<view :style="[{ height: StatusBar + 'px' }]"></view>
   	<view class="fu-tabbar-con flex justify-start align-center " :style="[{ height: CustomBar - StatusBar + 'px' }]">
   		<view class="cuIcon-back padding-left-sm text-white text-xl" @click="handleBack"></view>
   		<view class="search-wrap">
   			<view class="cu-bar search "  @click="handleSearch">
   				<view class="search-form round">
   					<text class="cuIcon-search"></text>
   					<input  :adjust-position="false" type="text" disabled :placeholder="i18['请输入商品名称']" confirm-type="search"  />
   				</view>
   			</view>
   		</view>
   	</view>
   </view>
    <view :style="[{ height: CustomBar + 'px' }]">

    </view>
    <!-- 店铺信息 start -->
    <view class="shop-wrap padding-left padding-right flex justify-between align-center" >
      <image class="shop-bg" v-if="info.store_backdrop" :src="info.store_backdrop" mode="widthFix" :style="{top:-CustomBar+'px'}"></image>
      <view class="flex justify-start align-center" style="width:calc(100% - 130rpx);">
        <view class="shop-img">
          <fu-image  :src="info.store_logo" mode="aspectFill"></fu-image>
        </view>
        <view class="shop-info" style="width:calc(100% - 116rpx);">
          <view class="shop-name text-white text-lg text-bold text-cut">{{info.store_name}}</view>
          <view class="shop-star flex justify-start align-center">
            <view class="shop-star-bg"><fu-star :readonly="false" :value="info.store_star" :size="30"></fu-star></view><view class="text-white text-sm">{{info.store_collection_num}}{{i18n['人关注']}}</view>
          </view>
        </view>
      </view>
      <view class="shop-coll">
        <view class="shop-btn text-white text-sm text-center" @click="handleFollow">
          <text :class="info.is_collection == 1 ?'cuIcon-likefill':'cuIcon-like' "></text><text>{{info.is_collection == 1 ? i18n['已关注'] : i18n['关注']}}</text>
        </view>
      </view>
    </view>
    <!-- 店铺信息 end -->
	</view>
</template>

<script>

	export default {
		data() {
			return {


			}
		},
    computed:{
      //店铺信息
      info:{
        get(){
          return this.$store.state.shopInfo
        },
        set(){}
      }
    },
    mounted() {
        const that = this
        let h = uni.createSelectorQuery().select(".page-header");
　　　  　 h.boundingClientRect(function(data) { //data - 各种参数
            // that.$store.commit('shopHeaderHight',data.height);
            that.$emit('getHeight',data.height)
　　     }).exec()
        this.info = this.$store.state.shopInfo;
        console.log(this.info)
    },
		methods: {
      /**
       * @description 返回上一页
       */
      handleBack(){
        uni.navigateBack({
          delta:1
        })
      },
      /**
       * @description 去搜索
       */
      handleSearch(){
        // console.log('ssssssssssssss',this.$emit)
        this.$emit('searchHomeChange','goods');

      },
      /**
       * @description 店铺收藏与取消收藏
       */
      handleFollow(){
        this.$api
          .post(global.apiUrls.postUserAddonsSetCollection, {
            collect_id: this.$store.state.partner_id ,//店铺id,
            type:4,//4代表商铺收藏
          })
          .then(res => {
            console.log(res);
            if (res.data.code == 1) {
              // this.info.is_collection = res.data.data.is_collection;
              if(res.data.data.is_collection == 1){
                this.$message.info(this.i18n['关注成功']);
              }else{
                this.$message.info(this.i18n['取消关注']);
              }
              this.get_shop_info(this.$store.state.partner_id);

              this.$forceUpdate();
            }else{
              this.$message.info(res.data.msg);
            }
          })
          .catch(err => {
            console.log(err);
          });
      },
      /**
       * @description 获取店铺信息
       */
      get_shop_info(partner_id){
        this.$api
          .post(global.apiUrls.get_shop_info, {
            partner_id: partner_id ,//店铺id,
            user_id: (global.userInfo && global.userInfo.id) ||  0,
          })
          .then(res => {
            console.log('店铺信息',res);
            if (res.data.code == 1) {
              this.info = res.data.data;
              this.$store.commit('shopInfo',res.data.data);
              uni.$emit('updataShopInfo',{num:res.data.data.store_collection_num,partner_id:partner_id});
              console.log('this.$store.state.shopInfo',this.$store.state.shopInfo)
            }else{
              this.$message.info(res.data.msg);
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
		}
	}
</script>

<style scoped lang="scss">

  // 标题栏 end
  // 搜索 start
  .fu-tabbar {
  	position: fixed;
  	top: 0;
  	left: 0;
  	width: 100%;
  	z-index: 99999;
  	 background: linear-gradient(45deg, #f43f3b, #ec008c);
    overflow: hidden;
    .bg-img{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
    .cu-bar .search-form{
      margin: 0;
      background: rgba(255,255,255,0.4);
      color: #FFFFFF;
    }
    .uni-input-placeholder{
      color: #FFFFFF;
    }
  	.fu-tabbar-con {
  		position: relative;

  		.search-wrap {
  			position: absolute;
  			top: 50%;
  			left: 50%;
  			transform: translate(-50%, -50%);
  			// #ifndef MP-WEIXIN
  			width: calc(100% - 120rpx);
  			// #endif
  			// #ifdef MP-WEIXIN
  			width: calc(100% - 242rpx);
  			// #endif
  		}
  	}
  }
  // 搜索 end
  // 店铺信息 start
  .shop-wrap{
    background: linear-gradient(45deg, #f43f3b, #ec008c);
    width: 100%;
    position: relative;
    padding-top: 40rpx;
    padding-bottom: 40rpx;
    overflow: hidden;

    .shop-bg{
      position: absolute;
      left: 0;
      z-index: 9;
      width: 100%;
    }
    .shop-img{
      width: 100rpx;
      height: 100rpx;
      border-radius: 8rpx;
      overflow: hidden;
      margin-right: 16rpx;
      position: relative;
      z-index: 10;
      .img{
        width: 100%;
        height: 100%;
      }
    }
    .shop-info{
      position: relative;
      z-index: 10;

      .shop-name{
        // margin-top: 2rpx;
      }
      .shop-star{
        margin-top: 8rpx;
        .shop-star-bg{
          background: rgba(255,255,255,0.21);
          border-radius: 16rpx;
          padding: 0 12rpx;
          margin-right: 12rpx;

        }

      }
    }

    .shop-coll{
      position: relative;
      z-index: 10;
      // margin-top: 50rpx;
      width: 130rpx;
      height: 48rpx;
      line-height: 48rpx;
      background: linear-gradient(126deg, #FA2033 0%, #FF6530 100%);
      opacity: 1;
      border-radius: 44rpx;
      .cuIcon-like,.cuIcon-likefill{
        margin-right: 8rpx;
      }
    }
  }
  // 店铺信息 end
</style>
